<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .cardTitle {
            height: 40px;
            line-height: 40px;
            color: rgb(75, 145, 225);
            border-left: 5px solid rgb(75, 145, 225);
            margin: 15px 0;
            padding-left: 10px;
        }

        .baseInfo {
            width: 100%;
            height: 150px;
        }

        .InfoItem {
            display: inline-block;
            width: 250px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            font-weight: bold;
        }

        .result {
            width: 100%;
            height: 450px;
        }
    </style>
</head>

<body>
    <div class="layuimini-container" style="padding: 20px;height: 880px;">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">账户余额</li>
                <li>预付款账户</li>
                <li>月结账户</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="title">
                        <img src="../images/分类.png" alt=""
                            style="width:80px;height:80px;border-radius: 80px;vertical-align: middle;">
                        <div style="display: inline-block;margin-left: 30px;vertical-align: middle;">
                            <button type="button" class="layui-btn layui-btn-normal" id="account1">旭辉运河悦章</button>
                            <p style="margin-top: 10px;">账单周期：2022-01-10 ~ 2022-02-10 账单已出，请于<span
                                    style="color: #FF5722;">2月20日</span>前还款</p>
                        </div>
                    </div>
                    <div class="thisTerm">
                        <p class="cardTitle">本期账单</p>
                        <span class="InfoItem">本期已出账单：¥3000.00</span>
                        <span class="InfoItem">最低还款额：¥2400.00</span>
                        <span class="InfoItem">已还：¥200.00</span>
                        <button type="button" class="layui-btn layui-btn-primary"
                            style="margin-left: 30px;">立即还款</button>
                    </div>
                    <div class="lastTerm">
                        <p class="cardTitle">上期账单</p>
                        <p style="color: #FF5722;">恭喜您，您的上期账单已还清</p>
                        <span class="InfoItem">账单金额：¥1000.00</span>
                        <span class="InfoItem">最低还款额：¥700.00</span>
                        <span class="InfoItem">已还：¥1000.00</span>
                        <button type="button" class="layui-btn layui-btn-disabled"
                            style="margin-left: 30px;">立即还款</button>
                        <div>
                            <div style="display: inline-block;vertical-align: middle;">
                                <img src="../images/工地中心/pay.png" alt="" style="width: 42px;">
                                <span class="InfoItem">总发生订单金额：¥3000.00</span>
                            </div>
                            <div style="display: inline-block;vertical-align: middle;margin-left: 50px;">
                                <img src="../images/工地中心/还款.png" alt="" style="width: 42px;">
                                <span class="InfoItem">总还款金额：¥3000.00</span>
                            </div>
                        </div>
                    </div>
                    <div class="thisTermDetail">
                        <p class="cardTitle" style="display: inline-block;vertical-align: middle;">本期账单明细</p>
                        <button type="button" class="layui-btn layui-btn-primary" style="margin-left: 30px;" onclick="var options = {
                                href: 'billDetail.html',
                                title: '往期账单明细'
                            };
                            parent.layui.miniTab.openNewTabByIframe(options);">往期账单</button>
                        <p style="color: #FF5722;">共2笔</p>
                        <div class="layui-tab-item layui-show">
                            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
            table.render({
                elem: '#currentTableId',
                url: '/bill',
                method: 'get',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.count, //解析表格数据总条数 eg:共100页              
                        "data": res.data //解析table表格数据源
                    };
                },
                where: {
                    "mode": '1'
                }, //where用来传递请求时额外的参数 eg:productName
                cols: [
                    [{
                            field: 'date',
                            width: 150,
                            title: '日期',
                            align: "center",
                            sort: true
                        }, {
                            field: 'pname',
                            width: 150,
                            title: '要货工地',
                            align: "center",
                            sort: true
                        },

                        {
                            field: 'mname',
                            width: 100,
                            title: '商品名称',
                            align: "center"
                        },
                        {
                            field: 'mtype',
                            width: 100,
                            title: '型号',
                            align: "center"
                        },
                        {
                            field: 'weight',
                            title: '净重（吨）',
                            width: 120,
                            align: "center",
                            sort: true
                        },
                        {
                            field: 'mprice',
                            title: '单价（元）',
                            width: 120,
                            align: "center",
                            sort: true,
                            templet: '<div>¥{{d.mprice}}</div>'
                        },
                        {
                            field: 'totalPrice',
                            title: '总价（元）',
                            width: 120,
                            align: "center",
                            sort: true,
                            templet: '<div>¥{{d.totalPrice}}</div>'
                        },
                        {
                            field: 'additionInfo',
                            title: '附属商品信息',
                            width: 240,
                            align: "center"
                        },
                        {
                            field: 'additionPrice',
                            title: '附属商品合计（元）',
                            width: 180,
                            align: "center",
                            sort: true,
                            templet: '<div>¥{{d.additionPrice}}</div>'
                        },
                        {
                            field: 'car',
                            title: '车牌号',
                            width: 100,
                            align: "center"
                        },
                        {
                            field: 'drivername',
                            title: '驾驶员',
                            width: 100,
                            align: "center"
                        },
                        {
                            field: 'checkPrice',
                            title: '财务复核金额（元）',
                            width: 180,
                            align: "center",
                            sort: true
                        },
                        {
                            field: 'checkReason',
                            title: '复核原因',
                            width: 120,
                            align: "center"
                        },
                        {
                            field: 'status',
                            title: '状态',
                            width: 100,
                            align: "center",
                            sort: true
                        },
                        {
                            field: 'finalPrice',
                            title: '金额（元）',
                            width: 120,
                            align: "center",
                            sort: true,
                            templet: '<div>¥{{d.finalPrice}}</div>'
                        }
                    ]
                ],
                skin: 'line'
            });

        });
    </script>

</body>

</html>